<template>
  <div class="MyUserInfoList">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="formInline.userName" placeholder="请输入用户名" clearable />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="formInline.phone" placeholder="请输入手机号" clearable />
      </el-form-item>
      <el-form-item label="身份">
        <el-select v-model="formInline.roleType" placeholder="请选择身份" clearable style="width: 120px;">
          <el-option label="管理员" value="0" />
          <el-option label="老师" value="1" />
          <el-option label="学生" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" @click="show = true">添加</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table ref="singleTableRef" :data="tableData" highlight-current-row border stripe align="center" size="small"
      style="width: 100%">
      <el-table-column type="index" label="序号" align="center" width="80" />
      <el-table-column property="userName" label="用户名" align="center" width="120" />
      <el-table-column property="phone" label="手机号" width="120" align="center" />

      <el-table-column property="roleType" label="身份" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.roleType === 0" type="success">管理员</el-tag>
          <el-tag v-else-if="scope.row.roleType === 1" type="warning">老师</el-tag>
          <el-tag v-else-if="scope.row.roleType === 2" type="info">学生</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <Pagination @getDate="getAllUserInfo" :queryNum="queryCount" />
    </div>
    <!-- 弹窗 -->
    <MyuserListDia title="人员管理" v-model:queryCount="queryCount" v-model:editItem="editItem" />
  </div>
</template>

<script setup>
// 引入封装的分页器
import Pagination from "@/components/base/MyPagination.vue";
import MyuserListDia from "./dialog/MyuserListDia.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, reactive, provide } from "vue";
// 导入请求接口
import { queryUserListApi, deleteUserApi } from "@/api/index";
// 收集筛选条件
const formInline = reactive({
  roleType: "",
});
// 提交搜索条件
const queryCount = ref(1);
// 提交搜索条件
const onSubmit = () => {
  queryCount.value += 1;
};
// 收集表格数据
const tableData = ref([
]);

// 弹窗
const show = ref(false);
// 注入依赖
provide("SHOW", show);

//获取全部数据
const getAllUserInfo = async (page) => {
  const params = {
    pageNum: page.pageNum,
    pageSize: page.pageSize,
  };
  for (const key in formInline) {
    if (formInline[key] != null && formInline[key] !== "") {
      params[key] = formInline[key];
    }
  }
  const res = await queryUserListApi(params);
  if (res.code !== "10000") {
    ElMessage({
      showClose: true,
      message: res.message,
      type: "error",
    });
    return;
  }
  ElMessage({
    showClose: true,
    message: `查询成功!`,
    type: "success",
  });
  tableData.value = res.data.list;
  page.totalCount = res.data.totalCount;
};

// 删除
const handleDelete = (index, row) => {
  console.log(index, row);
  ElMessageBox.confirm("确定删除这个用户吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      const res = await deleteUserApi(row.id);
      if (res.code !== "10000") {
        ElMessage({
          showClose: true,
          message: res.message,
          type: "error",
        })
        return;
      }
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      onSubmit()
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};
const editItem = ref({});
// 编辑
const handleEdit = (index, row) => {
  editItem.value = row;
  show.value = true;
}
</script>
<style scoped lang="scss">
.page {}
</style>
